<template>
	<view class="content">
		<view class="x-row boxcolor">
			<view class="l_text" @click="clhref">考勤统计</view>
			<view class="x-col"></view>
			<view class="x-col-center">
				<picker mode="date" :end="endDate" fields="month" @change="dateChange">
					<view class="x-row">
						<u-icon name="arrow-left" class="x-col-center" color="#fff" size="28" style="opacity: 0.7;"></u-icon>
						<view class="itemna">{{date}}</view>
						<u-icon name="arrow-right" class="x-col-center" color="#fff" size="28" style="opacity: 0.7;"></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="shownyber x-row" @click="clhref">
			<view class="x-col">
				<view class="nunber">{{info.days}}</view>
				<view class="n_text">出勤天数</view>
			</view>
			<view class="x-col">
				<view class="nunber">{{info.late}}</view>
				<view class="n_text">迟到</view>
			</view>
			<view class="x-col">
				<view class="nunber">{{info.leave_early}}</view>
				<view class="n_text">早退</view>
			</view>
			<view class="x-col">
				<view class="nunber">{{info.leave}}</view>
				<view class="n_text">请假</view>
			</view>
			<view class="x-col">
				<view class="nunber">{{info.miss}}</view>
				<view class="n_text">缺卡</view>
			</view>
		</view>
		<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"  />
		<view style="color:#333; font-size: 32upx; padding: 48upx 32upx 20upx 32upx">考勤打卡</view>
		<view class="punchtheclock">
			<view class="layers">
				<view class="text1" :class="info.clock_name=='上班打卡'?'text4':''">上班时间 {{info.morning}}</view>
				<!-- 打卡可能存在多次打卡，循环显示记录 -->
				<block v-for="(m,midx) in info.today_morning" :key="midx">
					<!-- status 打卡状态 1正常 2迟到 3早退 4请假 -->
					<view class="x-row">
						<view class="text2" v-if="m.type">打卡时间 {{m.sign_time}}</view>
						<view class="waibox" v-if="m.type==2">
							外勤
						</view>
						<view class="statusbox" v-if="m.status==2||m.status==3">
							{{m.status==2?'迟到':'早退'}}
						</view>
					</view>

					<!--type  打卡方式  0	未打卡 1	公司打卡 2 外勤打卡  3后台补卡 -->
					<view class="text3" v-if="m.type==1"><text>wifi</text>{{m.wifi_name}}</view>
					<view class="x-row" style="padding-top: 10rpx;" v-if="m.type==2">
						<view class="iconfont icondizhi2 x-col-center">

						</view>
						<view class="address">
							{{m.clock_address}}
						</view>
					</view>
					<view class="text2" v-if="m.type==3">后台补卡</view>
				</block>
				<view v-if="info.today_morning.length==0" class="text2">未打卡</view>
				<view style="height: 60upx;"></view>
				<view class=" " :class="info.clock_name=='下班打卡'?'text4':''"></view>
				<view class="text1 ">下班时间 {{info.afternoon}}</view>
				<block v-for="(af,aidx) in info.today_afternoon"   :key="aidx">
          <view v-if="aidx==0">
              <view class="x-row" >
                <view class="text2" v-if="af.type">打卡时间 {{af.sign_time}}</view>
                <view class="waibox" v-if="af.type==2">
                  外勤
                </view>
                <view class="statusbox" v-if="af.status==2||af.status==3">
                  早退
                </view>
              </view>
              <view class="text3" v-if="af.type==1"><text>wifi</text>{{af.wifi_name}}</view>
              <view class="text3" v-if="af.type==1">上班一天辛苦啦</view>
              <view class="x-row" style="padding-top: 10rpx;" v-if="af.type==2">
                <view class="iconfont icondizhi2 x-col-center"></view>
                <view class="address">
                  {{af.clock_address}}
                </view>
              </view>
              <view class="text2" v-if="af.type==3">后台补卡</view>
          </view>
				</block>

				<view v-if="info.today_afternoon.length==0" class="text2">未打卡</view>
			</view>
		</view>
		<view class="buttonbox" @click="clockThis" v-if="info.is_connect==1">
			<view style="font-size: 36upx;">{{info.clock_name}}</view>
			<view style="font-size: 26upx;">{{showTime}}</view>
		</view>
		<view class="buttonbox" @click="Wfield" v-if="info.is_connect==2">
			<view style="font-size: 36upx;">外勤打卡</view>
			<view style="font-size: 26upx;">{{showTime}}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date) 
	
		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	var inval = '';
	export default {
		data() {
			return {
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				}, 
        show: true,
				mode: 'range',
				src: "",
				isWifi: "",
				isGps: "",
				ssid: "",
				bssid: "",
				date: '',
				info: '',
				endDate: '',
				showTime: '',
				
			}
		},
		onLoad() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1;
			this.date = year + "-" + month;
			this.endDate = this.date;
			
			
		},
		onReady(){
				this.info.selected = [{
						date: getDate(new Date(),-3).fullDate,
						info: '打卡'
					},
					{
						date: getDate(new Date(),-2).fullDate,
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(),-1).fullDate,
						info: '已打卡'
					}
				]
		},
		onShow() {
			let that = this;
			this.getWifiGps();
			let timer = setInterval(function() {
				var date = new Date();
				var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
				var m = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
				var s = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();
				that.showTime = h + ':' + m + ':' + s
			}, 1000)
		},
		methods: {
			clockThis() {
				// 点击打卡 clock/clock
				let that = this,
					item = {
						type: this.info.is_connect,
					};
				if (this.info.is_connect == 2) {

				} else {
					item.wifi = this.bssid;
					this.$axios('clock/clock', item).then((res) => {
						that.loadInfo();
					});
				}


			},
			dateChange(e) {
				// 
				this.date = e.detail.value;
				this.loadInfo();
			},
			clhref() {
				uni.navigateTo({
					url: "./Punchinrecord?date=" + this.date
				})
			},
			gotoList() {

			},
			Wfield() {
				uni.navigateTo({
					url: "./Clockoutinthefield"
				})
        console.log("点击打卡了")
				// 外勤打卡
				// let that = this;
				// uni.getLocation({
				// 		type: 'gcj02',
				// 		altitude: true, //高精度定位
				// 		//定位成功，更新定位结果
				// 		success: function(res) {
				// 			// that.$axios.navigateTo("Clockoutinthefield?lat=" + res.latitude + "&lon=" + res.longitude)
				// 		}
				// 	})

			},
			getTimeOut(callback) {
				var that = this,
					two = 0;
				inval = setInterval(() => {
					// console.log("interval 1")
					if (two <= 1) {
						that.getWifiGps();
						two += 1;
					} else {
						clearInterval(inval)
					}
				}, 500);

			},
			// 回调函数分别 调用 设备方法，wifi获取参数接口
			getWifiGps() {
				var that = this;
				that.getPhoneSystemInfo(function() {
					if (that.isWifi && that.isGps) {
						that.startWifi(function() {
							that.connection(function() {
								that.loadInfo(that.ssid, that.bssid);
							});
						})
					} else {
						that.loadInfo('', '');
					}
				});
			},
			loadInfo() {
				// /clock/clock_census 考勤统计（初始化考勤数据）
				let that = this;
				that.info = {"miss":38,"days":0,"late":0,"leave_early":0,"leave":0,"morning":"08:35:00","afternoon":"17:30:00","today_morning":[],"today_afternoon":[],"is_connect":2,"clock_name":"\u4e0b\u73ed\u6253\u5361"}

			},
			// 设备开关 是否打开wifi 和gps定位开关
			getPhoneSystemInfo(callback) {
				// const res = wx.getSystemInfoSync(); 
				var that = this;
				wx.getSystemInfo({
					success(res) {
						// that.setData({
						that.isWifi = res.wifiEnabled ? res.wifiEnabled : '';
						that.isGps = res.locationEnabled ? res.locationEnabled : '';
						// })
						console.log("设备参数设置 Wifi：" + res.wifiEnabled + " Gps:" + res.locationEnabled)
						if (callback) {
							callback();
						}
					}
				})

			},

			//启用wifi模块
			startWifi(callback) {
				wx.startWifi({
					success: function(e) {
						callback();
					},
					fail: function(e) {

					}
				});
			},
			//获取到了设备数据
			connection(callback) {
				var that = this;
				wx.getConnectedWifi({
					success: function(e) {
						console.log(e, "wifi数据")
						that.ssid = e.wifi.SSID;
						that.bssid = e.wifi.BSSID;
						if (callback) {
							callback();
						}
					},
					fail: function(e) {
						console.log("获取失败")
						console.log(e)
						if (e.errCode == '12005') {
							wx.showModal({
								title: '提示',
								content: '请连接WiFi',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
						}else if (e.errCode == '12006') {
							wx.showModal({
								title: '提示',
								content: '请打开手机 GPS 定位开关',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
						}
						if (callback) {
							callback();
						}
					}
				})

			},
		},
		mounted() {
          
		},
		//onHide:{},  //监听页面隐藏
		//onUnload:{},	//监听页面卸载
		//onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
		//onReachBottom:{}, //页面滚动到底部
		//onShareAppMessage:{}, 用户点击右上角分享

	}
</script>

<style scoped lang="scss">
	.clockBox{
		.stitle{
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		.toprow{
			padding: 38rpx 0 0 0;
		}
		.left{
			width: 70rpx;
			.dian{
				width: 16rpx;
				height: 16rpx;
				background: #D8D8D8;
				margin: 0 auto;
				border-radius: 50%;
			}
			.line{
				width: 2rpx;
				height: 20rpx;
				background: rgba(0, 0, 0, 0.4);
			}
		}
		.time{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
		}
		.ctime{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			padding: 14rpx 0 4rpx 0;
		}
		.wifi{
			width: 44rpx;
			height: 22rpx;
			background: #4C7699;
			text-align: center;
			line-height: 22rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
			font-size: 22rpx;
			color: #ffffff;
		}
		.sinfo{
			width: 680rpx;
			margin-left: 35rpx;
			border-left: 2rpx solid rgba(0, 0, 0, 0.4);;
		}
	}
	.boxcolor {
		background: #2B88FE;
		padding: 35upx 30upx;
	}

	.l_text {
		color: #fff;
		font-size: 26upx;
	}

	.itemna {
		color: #fff;
		font-size: 30upx;
		padding: 0 20upx;
	}

	.shownyber {
		background: #2B88FE;
		text-align: center;
		color: #fff;
		font-size: 26upx;
		padding-bottom: 30upx;
	}

	.nunber {
		font-size: 40upx;
	}

	.punchtheclock {
		padding: 0 32upx;
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 50upx;
	}

	.layers {
		padding-left: 25upx;
		position: relative;

		.icondizhi2 {
			font-size: 40rpx;
			color: #D8D8D8;
			margin-right: 10rpx;
		}

		.waibox {
			width: 88rpx;
			height: 44rpx;
			border-radius: 4rpx;
			border: 2rpx solid #22BFB6;
			color: #22BFB6;
			font-size: 30rpx;
			text-align: center;
			line-height: 44rpx;
			margin-left: 16rpx;
			margin-top: 10rpx;
		}

		.statusbox {
			width: 88rpx;
			height: 44rpx;
			border-radius: 4rpx;
			border: 2rpx solid #FF930A;
			color: #FF930A;
			font-size: 30rpx;
			text-align: center;
			line-height: 44rpx;
			margin-left: 16rpx;
			margin-top: 10rpx;
		}
	}

	.text1 {
		color: #999;
		font-size: 26upx;
		position: relative;
	}

	.text2 {
		color: #333;
		font-size: 30upx;
		padding-top: 15upx;
	}

	.text3 text {
		color: #fff;
		font-size: 22upx;
		background: #4C7699;
		padding: 0 10upx;
		border-radius: 10upx;
		margin-right: 10upx;
	}

	.text3 {
		color: #979797;
		font-size: 26upx;
		padding-top: 5upx;
	}

	.text1::after {
		content: '';
		width: 16upx;
		height: 16upx;
		border-radius: 8upx;
		position: absolute;
		left: -32upx;
		top: 60%;
		z-index: 2;
		margin-top: -8upx;
		background: #D8D8D8;
	}

	.layers::after {
		content: '';
		width: 1px;
		background: #999;
		height: 60%;
		position: absolute;
		left: 0;
		top: 12upx;
	}

	.text4::after {
		background: #18B566;
	}

	.buttonbox {
		width: 212upx;
		height: 212upx;
		padding-top: 62upx;
		box-shadow: 0 30upx 50upx #bbddec;
		background: linear-gradient(136deg, #3992F6 0%, #0FB6FE 100%);
		margin: auto;
		border-radius: 150upx;
		margin-top: 88upx;
		text-align: center;
		color: #fff;
	}
</style>
